<template>
	<Layout class="layout-container">
		<Content>
			<Spin fix v-if="loading"></Spin>
			<Form ref="form" :model="value" :rules="rules" label-position="left" :label-width="120">
				<Layout class="layout-container">
					<Content class="padding-all">
			            <FormItem :label="label.name" prop="name">
			                <Input type="text" v-model="value.name" :placeholder="placeholder.name" />
			            </FormItem>
			            <FormItem :label="label.extent" prop="extent">
			                <Select
			                	v-model="value.extent"
			                	transfer
			                	:placeholder="placeholder.extent">
			                	<template v-for="item in dict.extent">
			                		<Option :value="item.value" :key="item.value">{{ item.label }}</Option>
			                	</template>
			                </Select>
			            </FormItem>
					</Content>
					<div class="padding-all">
		    			<span class="pull-right">
						<Button @click="reset">{{$t('info.reset')}}</Button>
						<Button 
							type="primary" 
							html-type="submit" 
							@click.prevent="submit">{{$t('info.submit')}}</Button>
						</span>
					</div>
				</Layout>
			</Form>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin, Form, FormItem, Button, Input, Select, Option } from 'view-design';
import { extendHtml, dicts, deleteNullValue } from 'config/utils';
import { update } from './api';

export default {
	name: "SysFilemanagerEdit",
	props: {
		params: Object
	},
	data() {
		const label = {
			name: this.$t("sys.filemanager.name"),
			extent: this.$t("sys.filemanager.extent"),
			file: this.$t("sys.filemanager.file")
		};
		return {
			loading: true,
			label,
			placeholder: {
				name: this.$t("info.placeholder", [label.name]),
				extent: this.$t('info.select', [label.extent]),
				file: this.$t('info.select', [label.file]),
			},
			value: {
				id: '',
				name: '',
				extent: '',
				file: null
			},
			dict: {
				extent: []
			},
			root: false,
			rules: {
				name: {
					label: label.name,
					required: true,
					max: 100,
					trigger: "blur"
				},
				extent: {
					label: label.extent,
					selected: true
				}
			}
		};
	},
	methods: {
		
		submit() {
			this.$refs.form.validate((valid) => {
				if(valid) {
					this.loading = true;
					update(this.value, (res) => {
						if(res.success) {
							deleteNullValue(res.data);
							//回调
							this.$emit('callback', res.data);
							//关闭窗口
							this.$emit('close');
						}
						this.loading = false;
					});
				}
			});
			return false;
		},
        reset() {
            this.$refs.form.resetFields();
            extendHtml(this.value, this.params);
        }

	},
	mounted() {
		dicts({
			values: {
				fileRange:"FILE-RANGE"
			},
			children: true
		}, (isOk, data) => {
			if(isOk) {
				this.dict.extent = data.fileRange.children;
			}
			this.$nextTick(() => {
				this.reset();
				this.loading = false;
			});
		});
	},
	components: {
		Layout,
		Content,
		Spin,
		Form,
		FormItem,
		Button,
		Input,
		Select,
		Option
	}
}
</script>